<!-- 提示弹窗 -->
<template>
	<view class='cu-modal' :class='{show: show}'>
		<view class='modal'>
			<view class="head">
				提醒设置
				<view @click="history" class="head-add">
					<!-- <image src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281528283973.png" mode=""></image> -->
					<view class="">
						历史记录
					</view>
				</view>
				<image @click="close" class="head-close" src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281528108113.png" mode=""></image>
			</view>
			<view class="list">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="item-head">
						<image src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281555406174.png" mode=""></image>
						<view class="item-head-text">提醒内容</view>
						<!-- <view @click="delItem(index)" class="item-head-del">删除</view> -->
					</view>
					<view class="item-content">
						<textarea v-model="item.content" maxlength="20" placeholder-class="placeholder-text-color" disable-default-padding placeholder="请输入提醒内容，20字以内"/>
						<view class="item-content-num">
							{{item.content.length}}/20
						</view>
					</view>
					<view class="item-time">
						<view class="item-time-text">
							提醒时间
						</view>
						<view class="item-right">
							<!-- <view class="item-time-select"> -->
								<uni-datetime-picker hide-second @change="changeDate" v-model="item.time">
									<view class="item-time-time">
										{{item.time?item.time:'请选择'}}
									</view>
								</uni-datetime-picker>
							<!-- </view> -->
							<image class="item-time-icon" src="https://ballon-vdigit.oss-cn-qingdao.aliyuncs.com/20250228/202502281546010897.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="btns">
				<view @click="submit" class="">
					确定
				</view>
			</view>
		</view>
		<remindDetail ref="remindDetail" :all="false"></remindDetail>
	</view>
</template>

<script>
	import {addRemind,pageRemind} from "@/api/pet/remind/saler.js"
	import remindDetail from "@/components/remindPet/sale-detail.vue"
	export default {
		components:{
			remindDetail
		},
		data() {
			return {
				show: false, 
				params: {},
				list:[],
				petTeam:{},
			}
		},
		created() {
			this.petTeam = uni.getStorageSync('pet_team')
		},
		methods: {
			history(){
				this.$refs.remindDetail.handleOpen({
					title:'历史记录',
					type:'SALER',
					item:this.params.item
				})
			},
			handleOpen(params) {
				if(params){
					this.params = params
				}
				this.list = [{
					teamId:this.petTeam.teamId,
					time:'',
					content:''
				}]
				this.show = true;
			},
			changeDate(e){
				console.log(e)
				let value =  e.split(' ')
				console.log(value)
			},
			addItem(){
				this.list.push({
					teamId:this.petTeam.teamId,
					time:'',
					content:''
				})
			},
			delItem(index){
				this.list.splice(index,1)
			},
			submit(){
				for (let i = 0; i < this.list.length; i++) {
					if(!this.list[i].content){
						return uni.showToast({
							title:'请填写提醒内容',
							icon:'none'
						})
					}
					if(!this.list[i].time){
						return uni.showToast({
							title:'请选择提醒时间',
							icon:'none'
						})
					}
					if(!this.list[i].time.split(' ')[1]){
						return uni.showToast({
							title:'提醒时间需要精确时间',
							icon:'none'
						})
					}
				}
				if(this.params){
					this.params.success(this.list)
				}
				this.close()
			},
			close() {
				this.show = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.modal {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #F8F8F8;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		z-index: 1024;
		.head{
			width: 100%;
			text-align: center;
			position: relative;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			line-height: 42rpx;
			margin: 32rpx 0 40rpx;
			.head-close{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 50%;
				right: 32rpx;
				transform: translateY(-50%);
			}
			.head-add{
				display: flex;
				align-items: center;
				position: absolute;
				top: 50%;
				left: 24rpx;
				transform: translateY(-50%);
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 8rpx;
				}
				view{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #222222;
					line-height: 37rpx;
				}
			}
		}
		.list{
			width: 718rpx;
			margin: 0 auto;
			max-height: 50vh;
			overflow: auto;
			.item{
				width: 100%;
				padding: 24rpx;
				margin-bottom: 24rpx;
				background: #fff;
				.item-head{
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}
					.item-head-text{
						flex: 1;
						text-align: left;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #222222;
						line-height: 42rpx;
					}
					.item-head-del{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF2626;
						line-height: 33rpx;
					}
				}
				.item-content{
					width: 100%;
					height: 160rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					padding: 24rpx;
					position: relative;
					margin-top: 16rpx;
					textarea{
						width: 100%;
						height: 100%;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #222222;
						line-height: 42rpx;
						text-align: left;
					}
					.item-content-num{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #BBBBBB;
						line-height: 24rpx;
						position: absolute;
						right: 24rpx;
						bottom: 24rpx;
					}
				}
				.item-time{
					width: 100%;
					margin-top: 24rpx;
					border-top: 1rpx dashed #E5E5E5;
					padding-top: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-time-text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 30rpx;
						color: #222222;
						line-height: 42rpx;
					}
					.item-right{
						display: flex;
						align-items: center;
						justify-content: flex-end;
						// .item-time-select{
						// 	display: flex;
						// 	justify-content: flex-end;
							.item-time-time{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 30rpx;
								color: #222222;
								line-height: 42rpx;
							}
						// }
						.item-time-icon{
							width: 30rpx;
							height: 30rpx;
							margin-left: 4rpx;
						}
					}
				}
			}
		}
		.btns{
			width: 100%;
			padding: 8rpx 0 76rpx;
			background: #FFFFFF;
			view{
				width: 686rpx;
				background: #FFE359;
				border-radius: 48rpx;
				margin: 0 auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				line-height: 96rpx;
				text-align: center;
			}
		}
	}
</style>